<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection" />
	<meta content="emai=no" name="format-detection" />
	<link rel="stylesheet" type="text/css" href="/css/common.css" />
	<link rel="stylesheet" type="text/css" href="/css/form.css" />
	<title>个人信息登记页</title>
	<style>
		
		form li > label {
			width: 22%;
		}

		form input {
			background-color: #fdfdfd;
			border: 1px solid #e2e2e2;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
			font-size: 1.5rem;
			height: 40px;
			padding: 0 10px;
			width: 100%;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			-webkit-appearance: none;
		}

		#btn-scan {
			background-color: #ffee71;
			-moz-background-clip: padding-box;
			-webkit-background-clip: padding-box;
			background-clip: padding-box;
			border: 1px solid #232323;
			-moz-border-radius: 20px;
			-webkit-border-radius: 20px;
			border-radius: 20px;
			color: #232323;
			display: block;
			margin: 10px auto 0 auto;
			font-size: 1.4rem;
			padding: 8px 15px;
			width: 80px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<form>
			<section>
				<ul id="form1">
					<li class="flex-wrapper flex-align-center">
						<label>我的状态</label>
						<p class="flex-1">
							<input type="radio" id="status_pregnant" name="status" value="1" />
							<label name="status" class="" for="status_pregnant" data-type="pregnant">怀孕中</label>
							<input type="radio" id="status_baby" name="status" value="2" />
							<label name="status" class="" for="status_baby" data-type="baby">已生宝宝</label>
							<input type="radio" id="status_others" name="status" value="3" />
							<label name="status" class="" for="status_others">其他</label>
						</p>
					</li>
					<li class="flex-wrapper flex-align-center pregnant two due">
						<label>是否二胎</label>
						<p class="flex-1">
							<input type="radio" id="second_pregnancy" name="second_pregnancy" value="1" />
							<label name="isTwoBabies" class="" for="isTwoBabies_yes" data-type="two">是</label>
							&emsp;
							<input type="radio" id="second_pregnancy" name="second_pregnancy" value="2" />
							<label name="isTwoBabies" class="" for="isTwoBabies_no" data-type="due">否</label>
						</p>
					</li>
					<li class="flex-wrapper flex-align-center baby older younger">
						<label>是否两个宝宝</label>
						<p class="flex-1">
							<input type="radio" id="two_baby" name="two_baby" value="1" />
							<label name="isTwoBabies" class="" for="isTwoBabies_yes" data-type="older">是</label>
							&emsp;
							<input type="radio" id="two_baby" name="two_baby" value="2" />
							<label name="isTwoBabies" class="" for="isTwoBabies_no" data-type="younger">否</label>
						</p>
					</li>
					<li class="flex-wrapper flex-align-center pregnant due two">
						<label>预产期</label>
						<p class="flex-1">
							<input type="date" id="predict_date" name="predict_date" value="" data-message="预产期不能为空" />
						</p>
					</li>
					<li class="flex-wrapper flex-align-center older two">
						<label>大宝生日</label>
						<p class="flex-1">
							<input type="date" id="baby_1_date" name="baby_1_date" value="" data-message="大宝生日不能为空" />
						</p>
					</li>
					<li class="flex-wrapper flex-align-center older two">
						<label>大宝性别</label>
						<p class="flex-1">
							<input type="radio" id="olderSex_male" name="baby_1_sex" value="1" checked="" />
							<label name="olderSex" class="" for="olderSex_male">王子</label>
							&emsp;
							<input type="radio" id="olderSex_female" name="baby_1_sex" value="2" />
							<label name="olderSex" class="" for="olderSex_female">公主</label>
						</p>
					</li>
					<li class="flex-wrapper flex-align-center older">
						<label>小宝生日</label>
						<p class="flex-1">
							<input type="date" id="baby_2_date" name="baby_2_date" value="" data-message="小宝生日不能为空" />
						</p>
					</li>
					<li class="flex-wrapper flex-align-center older">
						<label>小宝性别</label>
						<p class="flex-1">
							<input type="radio" id="youngerSex_male" name="baby_2_sex" value="1" checked="" />
							<label name="youngerSex" class="" for="youngerSex_male">王子</label>
							&emsp;
							<input type="radio" id="youngerSex_female" name="baby_2_sex" value="2" />
							<label name="youngerSex" class="" for="youngerSex_female">公主</label>
						</p>
					</li>
					<li class="flex-wrapper flex-align-center younger">
						<label>宝宝生日</label>
						<p class="flex-1">
							<input type="date" id="baby_1_date" name="baby_1_date" value="" data-message="宝宝生日不能为空" />
						</p>
					</li>
					<li class="flex-wrapper flex-align-center younger">
						<label>宝宝性别</label>
						<p class="flex-1">
							<input type="radio" id="sex_male" name="baby_1_sex" value="1" checked="" />
							<label name="sex" class="" for="sex_male">王子</label>
							&emsp;
							<input type="radio" id="sex_female" name="baby_1_sex" value="2" />
							<label name="sex" class="" for="sex_female">公主</label>
						</p>
					</li>
				</ul>
			</section>
			<button type="submit">提 交</button>
		</form>
	</div>
	<script src="/js/zepto-1.1.6.js" type="text/javascript"></script>
	<script src="/js/common.js" type="text/javascript"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script>
		Zepto(function ($) {
			baiaimama.validated = true;
			$("ul li").hide();
			$("ul li").eq(0).show();
			$("button[type='submit']").click(function (e) {
				baiaimama.validated = true;
				e.preventDefault();
				if (baiaimama.validated) $("form").submit();
			});

			$("input[type='radio']").next("label").each(function (index, element) {
				$(this).click(function (e) {
					e.preventDefault();
					$(this).addClass("checked");
					$(this).prev("input[type = 'radio']").attr("checked", "checked");
					$(this).siblings("label").removeClass("checked");
					$("ul li").hide();
					$("ul li").eq(0).show();
					$(this).prev("input[type = 'radio']").siblings("input[type = 'radio']").removeAttr("checked");
					$("." + $(this).data("type")).show();
				});
			});
		});
	</script>
</body>
</html>
